<script setup lang="ts">
import router from '@/router';
import type { ElTooltipProps } from 'element-plus';
import type { CSSProperties } from 'vue';

export interface ColumnText {
  prop: string; // 对应数据的字段名
  label?: string; // 表头显示的文本
  width?: number; // 列宽度
  textClass?: string; // 文本类，可以用来添加 TailwindCSS 的类 (必须是常量，否则打包后无法识别)
  textStyle?: CSSProperties; // 文本样式
  showOverflowTooltip?: boolean | Partial<ElTooltipProps>; // 是否显示 tooltip，以及 tooltip 的配置; 默认为 defaultOverflowTooltip
  transform?: (v: any) => any; // 数据转换函数，用于格式化数据
  onClick?: (row: any) => void; // 点击事件的处理函数
  router?: (row: any) => { name: string; params: Record<string, any> }; // 动态生成路由配置的函数
  link?: string; // 新增 link 属性，点击时跳转的 URL
}

// 默认的 tooltip 配置
const defaultOverflowTooltip = { placement: 'left' };

defineProps<{
  columns: ColumnText[]; // 表格列配置
}>();

// 辅助函数，用于根据 prop 字符串解析嵌套字段
const getNestedValue = (obj: Record<string, any>, path: string) => {
  const keys = path.split('.'); // 通过 '.' 分隔路径
  return keys.reduce((acc, key) => (acc && acc[key] ? acc[key] : ''), obj);
};

// 处理点击事件
function handleClick(row: any, col: ColumnText) {
  // 如果 col.link 为 true，表示需要动态计算链接
  if (col.link) {
    const link = row.attributes.url; // 通过 row 数据获取动态的 URL
    if (link) {
      window.open(link, '_blank');
    }
  } else if (col.onClick) {
    col.onClick(row); // 如果有 onClick 处理函数，执行该函数
  } else if (col.router) {
    // 如果 router 是一个函数
    const routerConfig = col.router(row); // 调用 router 函数，传入 row
    if (routerConfig && routerConfig.name && routerConfig.params) {
      router.push({ name: routerConfig.name, params: routerConfig.params });
    } else {
      console.error('Invalid router configuration or parameters', row);
    }
  }
}
</script>

<template>
  <el-table-column
    v-for="col in columns"
    :key="col.prop"
    :prop="col.prop"
    :label="col.label"
    :width="col.width"
    :show-overflow-tooltip="col.showOverflowTooltip ?? defaultOverflowTooltip"
  >
    <template #default="{ row, column, $index }">
      <slot :row="row" :column="column" :index="$index">
        <span
          :class="[col.textClass, 'text-base']"
          :style="col.textStyle"
          @click="handleClick(row, col)"
        >
          {{
            col.transform
              ? col.transform(getNestedValue(row, col.prop))
              : getNestedValue(row, col.prop)
          }}
        </span>
      </slot>
    </template>

    <template #header="{ column, $index }">
      <slot name="header" :column="column" :index="$index"></slot>
    </template>

    <template #filter-icon>
      <!-- TODO: 后续可能需要增加列筛选？ -->
    </template>
  </el-table-column>
</template>

<style scoped>
/* 默认字体样式 (可选) */
.el-table-column span {
  font-family: 'Arial', sans-serif;
  font-size: 14px;
  color: #333;
}
</style>
